<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible' content='ie=edge,chrome=1">
  <link rel="stylesheet" href="./css/index.css?ver=1.0">
  <link rel="icon" href="./img/html_icon.png">
  <title>🧨🧨祝您新年好运连连！🎁</title>
</head>

<body>
  <!-- 烟花 -->
  <div class="fire">
    <canvas></canvas>
  </div>
  <!-- 装饰 -->
  <div class="index">
    <div class="lantern"></div>
    <div class="time">
      距离除夕
      <span class="hour">--</span> :
      <span class="min">--</span> :
      <span class="second">--</span>
    </div>
    <div class="text"></div>
    <div class="fence">
      <div class="p2">提前看烟花</div>
    </div>
  </div>
  <!-- 烟花音效 -->
  <div class="fireSound">
    <audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
    <audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
    <audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
  </div>
  <!-- 背景音乐 -->
  <div class="music run">
    <audio src="./mp3/bgm.mp3" loop></audio>
  </div>
  <!-- 用于填充canvas的背景图片 -->
  <img id="backgroundImg" src="./img/background.png" alt="">
  <!-- 脚本 -->
  <script src="./js/index.js?ver=1.0"></script>
</body>

</html>